<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1412454" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">服务</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">一般</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">满意</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">评分</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">身份证</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">认证</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">邀请</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">爱情 约会</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">小程序</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">发布</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">钱包</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">base-关闭</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">不喜欢</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">学院</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">评分</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">动态</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">base-功能权限</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">base-用户部门</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">base-用户查询</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">base-字段过滤</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">base-用户注册</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">base-项目流程</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">base-用户权限</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79b;</span>
                <div class="name">base-数据检查</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">base-我的已办</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">base-系统工具</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">base-我的待办</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">base-条件选择</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">base-属性修改</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">base-日志详情</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">base-明细</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">base-属性批量修改</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">base-实体日志</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">base-实体权限</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">base-过滤条件</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">base-工单详情</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">base-日志管理</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">base-工单查询</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">base-工单检查</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">base-工单管理</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">base-关联字段</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">base-菜单回缩</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">base-登录日志</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">base-查询统计</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">base-查询过滤</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">base-部分报表</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">base-其他检查</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">base-部门编辑</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">base-查询结果</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">base-部门与用户关联</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c8;</span>
                <div class="name">base-附件下载</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">base-全部报表</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">base-项目概览</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">base-搜索</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cc;</span>
                <div class="name">base-综合服务</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">base-实体清除</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">base-默认窗口</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">base-确定</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">base-数据导入</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d1;</span>
                <div class="name">base-数据挖掘</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d2;</span>
                <div class="name">base-设置</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d3;</span>
                <div class="name">base-联系我们</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d4;</span>
                <div class="name">base-查看附件</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d5;</span>
                <div class="name">base-审核通过</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d6;</span>
                <div class="name">base-查看审核意见</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d8;</span>
                <div class="name">base-用户审核</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">base-补贴目录</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">base-审核不通过</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7db;</span>
                <div class="name">base-政策法规</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dd;</span>
                <div class="name">base-添加</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7de;</span>
                <div class="name">base-日历</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7df;</span>
                <div class="name">图片加载失败</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconzhifubao"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.iconzhifubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconweixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.iconweixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.iconxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwu"></span>
            <div class="name">
              服务
            </div>
            <div class="code-name">.iconfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyiban"></span>
            <div class="name">
              一般
            </div>
            <div class="code-name">.iconyiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.iconfenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsmiling"></span>
            <div class="name">
              满意
            </div>
            <div class="code-name">.iconsmiling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpingfen1"></span>
            <div class="name">
              评分
            </div>
            <div class="code-name">.iconpingfen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcredentials_icon"></span>
            <div class="name">
              身份证
            </div>
            <div class="code-name">.iconcredentials_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenzheng"></span>
            <div class="name">
              认证
            </div>
            <div class="code-name">.iconrenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyaoqing"></span>
            <div class="name">
              邀请
            </div>
            <div class="code-name">.iconyaoqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaiqingyuehui"></span>
            <div class="name">
              爱情 约会
            </div>
            <div class="code-name">.iconaiqingyuehui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaochengxu"></span>
            <div class="name">
              小程序
            </div>
            <div class="code-name">.iconxiaochengxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconchongzhi"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.iconchongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpaperplane"></span>
            <div class="name">
              发布
            </div>
            <div class="code-name">.iconpaperplane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqianbao"></span>
            <div class="name">
              钱包
            </div>
            <div class="code-name">.iconqianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwode1"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.iconwode1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguanzhu"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.iconguanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.iconwode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbase-guanbi"></span>
            <div class="name">
              base-关闭
            </div>
            <div class="code-name">.iconbase-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbuxihuan"></span>
            <div class="name">
              不喜欢
            </div>
            <div class="code-name">.iconbuxihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.iconshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxueyuan"></span>
            <div class="name">
              学院
            </div>
            <div class="code-name">.iconxueyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpingfen"></span>
            <div class="name">
              评分
            </div>
            <div class="code-name">.iconpingfen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondongtai"></span>
            <div class="name">
              动态
            </div>
            <div class="code-name">.icondongtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.iconshipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconAssignFunc"></span>
            <div class="name">
              base-功能权限
            </div>
            <div class="code-name">.iconAssignFunc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconManUserOrgan"></span>
            <div class="name">
              base-用户部门
            </div>
            <div class="code-name">.iconManUserOrgan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconSelOrganUserPerm"></span>
            <div class="name">
              base-用户查询
            </div>
            <div class="code-name">.iconSelOrganUserPerm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconFldFilter"></span>
            <div class="name">
              base-字段过滤
            </div>
            <div class="code-name">.iconFldFilter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconuserregister"></span>
            <div class="name">
              base-用户注册
            </div>
            <div class="code-name">.iconuserregister
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprojectprocess"></span>
            <div class="name">
              base-项目流程
            </div>
            <div class="code-name">.iconprojectprocess
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconuserauthority"></span>
            <div class="name">
              base-用户权限
            </div>
            <div class="code-name">.iconuserauthority
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconCheckDataTabs"></span>
            <div class="name">
              base-数据检查
            </div>
            <div class="code-name">.iconCheckDataTabs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTickFinish"></span>
            <div class="name">
              base-我的已办
            </div>
            <div class="code-name">.iconTickFinish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsystemtool"></span>
            <div class="name">
              base-系统工具
            </div>
            <div class="code-name">.iconsystemtool
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTickToDo"></span>
            <div class="name">
              base-我的待办
            </div>
            <div class="code-name">.iconTickToDo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconCondition"></span>
            <div class="name">
              base-条件选择
            </div>
            <div class="code-name">.iconCondition
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconSelAttRevise"></span>
            <div class="name">
              base-属性修改
            </div>
            <div class="code-name">.iconSelAttRevise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconLoginDetail"></span>
            <div class="name">
              base-日志详情
            </div>
            <div class="code-name">.iconLoginDetail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconReptDetail"></span>
            <div class="name">
              base-明细
            </div>
            <div class="code-name">.iconReptDetail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconAttsModify"></span>
            <div class="name">
              base-属性批量修改
            </div>
            <div class="code-name">.iconAttsModify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconEntityLog"></span>
            <div class="name">
              base-实体日志
            </div>
            <div class="code-name">.iconEntityLog
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconAssignEntity"></span>
            <div class="name">
              base-实体权限
            </div>
            <div class="code-name">.iconAssignEntity
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconExpMoreInput"></span>
            <div class="name">
              base-过滤条件
            </div>
            <div class="code-name">.iconExpMoreInput
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTickDetail"></span>
            <div class="name">
              base-工单详情
            </div>
            <div class="code-name">.iconTickDetail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlogs"></span>
            <div class="name">
              base-日志管理
            </div>
            <div class="code-name">.iconlogs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTickQuery"></span>
            <div class="name">
              base-工单查询
            </div>
            <div class="code-name">.iconTickQuery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTickCheck"></span>
            <div class="name">
              base-工单检查
            </div>
            <div class="code-name">.iconTickCheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTicket"></span>
            <div class="name">
              base-工单管理
            </div>
            <div class="code-name">.iconTicket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconImpTable"></span>
            <div class="name">
              base-关联字段
            </div>
            <div class="code-name">.iconImpTable
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconretracting"></span>
            <div class="name">
              base-菜单回缩
            </div>
            <div class="code-name">.iconretracting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconLoginLog"></span>
            <div class="name">
              base-登录日志
            </div>
            <div class="code-name">.iconLoginLog
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconquerycount"></span>
            <div class="name">
              base-查询统计
            </div>
            <div class="code-name">.iconquerycount
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqueryfilter"></span>
            <div class="name">
              base-查询过滤
            </div>
            <div class="code-name">.iconqueryfilter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpartreport"></span>
            <div class="name">
              base-部分报表
            </div>
            <div class="code-name">.iconpartreport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconCheckOther"></span>
            <div class="name">
              base-其他检查
            </div>
            <div class="code-name">.iconCheckOther
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondepartmentedit"></span>
            <div class="name">
              base-部门编辑
            </div>
            <div class="code-name">.icondepartmentedit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconCheckResult"></span>
            <div class="name">
              base-查询结果
            </div>
            <div class="code-name">.iconCheckResult
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondepartmentanduser"></span>
            <div class="name">
              base-部门与用户关联
            </div>
            <div class="code-name">.icondepartmentanduser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconattachment"></span>
            <div class="name">
              base-附件下载
            </div>
            <div class="code-name">.iconattachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconallreport"></span>
            <div class="name">
              base-全部报表
            </div>
            <div class="code-name">.iconallreport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconprojectoverview"></span>
            <div class="name">
              base-项目概览
            </div>
            <div class="code-name">.iconprojectoverview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsearch"></span>
            <div class="name">
              base-搜索
            </div>
            <div class="code-name">.iconsearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconservices"></span>
            <div class="name">
              base-综合服务
            </div>
            <div class="code-name">.iconservices
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconstcleanup"></span>
            <div class="name">
              base-实体清除
            </div>
            <div class="code-name">.iconstcleanup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwindow"></span>
            <div class="name">
              base-默认窗口
            </div>
            <div class="code-name">.iconwindow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondetermine"></span>
            <div class="name">
              base-确定
            </div>
            <div class="code-name">.icondetermine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondateimport"></span>
            <div class="name">
              base-数据导入
            </div>
            <div class="code-name">.icondateimport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondatamining"></span>
            <div class="name">
              base-数据挖掘
            </div>
            <div class="code-name">.icondatamining
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconptparameter"></span>
            <div class="name">
              base-设置
            </div>
            <div class="code-name">.iconptparameter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcontact"></span>
            <div class="name">
              base-联系我们
            </div>
            <div class="code-name">.iconcontact
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconviewattachment"></span>
            <div class="name">
              base-查看附件
            </div>
            <div class="code-name">.iconviewattachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconthrough"></span>
            <div class="name">
              base-审核通过
            </div>
            <div class="code-name">.iconthrough
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconviewopinion"></span>
            <div class="name">
              base-查看审核意见
            </div>
            <div class="code-name">.iconviewopinion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconuserexamine"></span>
            <div class="name">
              base-用户审核
            </div>
            <div class="code-name">.iconuserexamine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsubsidy"></span>
            <div class="name">
              base-补贴目录
            </div>
            <div class="code-name">.iconsubsidy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconnotthrough"></span>
            <div class="name">
              base-审核不通过
            </div>
            <div class="code-name">.iconnotthrough
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpolicies"></span>
            <div class="name">
              base-政策法规
            </div>
            <div class="code-name">.iconpolicies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.iconxihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlocation"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.iconlocation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconaddto"></span>
            <div class="name">
              base-添加
            </div>
            <div class="code-name">.iconaddto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcalendar"></span>
            <div class="name">
              base-日历
            </div>
            <div class="code-name">.iconcalendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconplf"></span>
            <div class="name">
              图片加载失败
            </div>
            <div class="code-name">.iconplf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxinbaniconshangchuan-"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.iconxinbaniconshangchuan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-test"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.iconicon-test
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhifubao"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#iconzhifubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconweixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#iconweixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#iconxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwu"></use>
                </svg>
                <div class="name">服务</div>
                <div class="code-name">#iconfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyiban"></use>
                </svg>
                <div class="name">一般</div>
                <div class="code-name">#iconyiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#iconfenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsmiling"></use>
                </svg>
                <div class="name">满意</div>
                <div class="code-name">#iconsmiling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpingfen1"></use>
                </svg>
                <div class="name">评分</div>
                <div class="code-name">#iconpingfen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcredentials_icon"></use>
                </svg>
                <div class="name">身份证</div>
                <div class="code-name">#iconcredentials_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenzheng"></use>
                </svg>
                <div class="name">认证</div>
                <div class="code-name">#iconrenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyaoqing"></use>
                </svg>
                <div class="name">邀请</div>
                <div class="code-name">#iconyaoqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaiqingyuehui"></use>
                </svg>
                <div class="name">爱情 约会</div>
                <div class="code-name">#iconaiqingyuehui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaochengxu"></use>
                </svg>
                <div class="name">小程序</div>
                <div class="code-name">#iconxiaochengxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconchongzhi"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#iconchongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpaperplane"></use>
                </svg>
                <div class="name">发布</div>
                <div class="code-name">#iconpaperplane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqianbao"></use>
                </svg>
                <div class="name">钱包</div>
                <div class="code-name">#iconqianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwode1"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#iconwode1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguanzhu"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#iconguanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#iconwode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbase-guanbi"></use>
                </svg>
                <div class="name">base-关闭</div>
                <div class="code-name">#iconbase-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbuxihuan"></use>
                </svg>
                <div class="name">不喜欢</div>
                <div class="code-name">#iconbuxihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#iconshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxueyuan"></use>
                </svg>
                <div class="name">学院</div>
                <div class="code-name">#iconxueyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpingfen"></use>
                </svg>
                <div class="name">评分</div>
                <div class="code-name">#iconpingfen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondongtai"></use>
                </svg>
                <div class="name">动态</div>
                <div class="code-name">#icondongtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#iconshipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconAssignFunc"></use>
                </svg>
                <div class="name">base-功能权限</div>
                <div class="code-name">#iconAssignFunc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconManUserOrgan"></use>
                </svg>
                <div class="name">base-用户部门</div>
                <div class="code-name">#iconManUserOrgan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconSelOrganUserPerm"></use>
                </svg>
                <div class="name">base-用户查询</div>
                <div class="code-name">#iconSelOrganUserPerm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconFldFilter"></use>
                </svg>
                <div class="name">base-字段过滤</div>
                <div class="code-name">#iconFldFilter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconuserregister"></use>
                </svg>
                <div class="name">base-用户注册</div>
                <div class="code-name">#iconuserregister</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprojectprocess"></use>
                </svg>
                <div class="name">base-项目流程</div>
                <div class="code-name">#iconprojectprocess</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconuserauthority"></use>
                </svg>
                <div class="name">base-用户权限</div>
                <div class="code-name">#iconuserauthority</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconCheckDataTabs"></use>
                </svg>
                <div class="name">base-数据检查</div>
                <div class="code-name">#iconCheckDataTabs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTickFinish"></use>
                </svg>
                <div class="name">base-我的已办</div>
                <div class="code-name">#iconTickFinish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsystemtool"></use>
                </svg>
                <div class="name">base-系统工具</div>
                <div class="code-name">#iconsystemtool</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTickToDo"></use>
                </svg>
                <div class="name">base-我的待办</div>
                <div class="code-name">#iconTickToDo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconCondition"></use>
                </svg>
                <div class="name">base-条件选择</div>
                <div class="code-name">#iconCondition</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconSelAttRevise"></use>
                </svg>
                <div class="name">base-属性修改</div>
                <div class="code-name">#iconSelAttRevise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconLoginDetail"></use>
                </svg>
                <div class="name">base-日志详情</div>
                <div class="code-name">#iconLoginDetail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconReptDetail"></use>
                </svg>
                <div class="name">base-明细</div>
                <div class="code-name">#iconReptDetail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconAttsModify"></use>
                </svg>
                <div class="name">base-属性批量修改</div>
                <div class="code-name">#iconAttsModify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconEntityLog"></use>
                </svg>
                <div class="name">base-实体日志</div>
                <div class="code-name">#iconEntityLog</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconAssignEntity"></use>
                </svg>
                <div class="name">base-实体权限</div>
                <div class="code-name">#iconAssignEntity</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconExpMoreInput"></use>
                </svg>
                <div class="name">base-过滤条件</div>
                <div class="code-name">#iconExpMoreInput</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTickDetail"></use>
                </svg>
                <div class="name">base-工单详情</div>
                <div class="code-name">#iconTickDetail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlogs"></use>
                </svg>
                <div class="name">base-日志管理</div>
                <div class="code-name">#iconlogs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTickQuery"></use>
                </svg>
                <div class="name">base-工单查询</div>
                <div class="code-name">#iconTickQuery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTickCheck"></use>
                </svg>
                <div class="name">base-工单检查</div>
                <div class="code-name">#iconTickCheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTicket"></use>
                </svg>
                <div class="name">base-工单管理</div>
                <div class="code-name">#iconTicket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconImpTable"></use>
                </svg>
                <div class="name">base-关联字段</div>
                <div class="code-name">#iconImpTable</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconretracting"></use>
                </svg>
                <div class="name">base-菜单回缩</div>
                <div class="code-name">#iconretracting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconLoginLog"></use>
                </svg>
                <div class="name">base-登录日志</div>
                <div class="code-name">#iconLoginLog</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquerycount"></use>
                </svg>
                <div class="name">base-查询统计</div>
                <div class="code-name">#iconquerycount</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqueryfilter"></use>
                </svg>
                <div class="name">base-查询过滤</div>
                <div class="code-name">#iconqueryfilter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpartreport"></use>
                </svg>
                <div class="name">base-部分报表</div>
                <div class="code-name">#iconpartreport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconCheckOther"></use>
                </svg>
                <div class="name">base-其他检查</div>
                <div class="code-name">#iconCheckOther</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondepartmentedit"></use>
                </svg>
                <div class="name">base-部门编辑</div>
                <div class="code-name">#icondepartmentedit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconCheckResult"></use>
                </svg>
                <div class="name">base-查询结果</div>
                <div class="code-name">#iconCheckResult</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondepartmentanduser"></use>
                </svg>
                <div class="name">base-部门与用户关联</div>
                <div class="code-name">#icondepartmentanduser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconattachment"></use>
                </svg>
                <div class="name">base-附件下载</div>
                <div class="code-name">#iconattachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconallreport"></use>
                </svg>
                <div class="name">base-全部报表</div>
                <div class="code-name">#iconallreport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconprojectoverview"></use>
                </svg>
                <div class="name">base-项目概览</div>
                <div class="code-name">#iconprojectoverview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsearch"></use>
                </svg>
                <div class="name">base-搜索</div>
                <div class="code-name">#iconsearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconservices"></use>
                </svg>
                <div class="name">base-综合服务</div>
                <div class="code-name">#iconservices</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconstcleanup"></use>
                </svg>
                <div class="name">base-实体清除</div>
                <div class="code-name">#iconstcleanup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwindow"></use>
                </svg>
                <div class="name">base-默认窗口</div>
                <div class="code-name">#iconwindow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondetermine"></use>
                </svg>
                <div class="name">base-确定</div>
                <div class="code-name">#icondetermine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondateimport"></use>
                </svg>
                <div class="name">base-数据导入</div>
                <div class="code-name">#icondateimport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondatamining"></use>
                </svg>
                <div class="name">base-数据挖掘</div>
                <div class="code-name">#icondatamining</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconptparameter"></use>
                </svg>
                <div class="name">base-设置</div>
                <div class="code-name">#iconptparameter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcontact"></use>
                </svg>
                <div class="name">base-联系我们</div>
                <div class="code-name">#iconcontact</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconviewattachment"></use>
                </svg>
                <div class="name">base-查看附件</div>
                <div class="code-name">#iconviewattachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconthrough"></use>
                </svg>
                <div class="name">base-审核通过</div>
                <div class="code-name">#iconthrough</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconviewopinion"></use>
                </svg>
                <div class="name">base-查看审核意见</div>
                <div class="code-name">#iconviewopinion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconuserexamine"></use>
                </svg>
                <div class="name">base-用户审核</div>
                <div class="code-name">#iconuserexamine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsubsidy"></use>
                </svg>
                <div class="name">base-补贴目录</div>
                <div class="code-name">#iconsubsidy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconnotthrough"></use>
                </svg>
                <div class="name">base-审核不通过</div>
                <div class="code-name">#iconnotthrough</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpolicies"></use>
                </svg>
                <div class="name">base-政策法规</div>
                <div class="code-name">#iconpolicies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#iconxihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlocation"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#iconlocation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconaddto"></use>
                </svg>
                <div class="name">base-添加</div>
                <div class="code-name">#iconaddto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcalendar"></use>
                </svg>
                <div class="name">base-日历</div>
                <div class="code-name">#iconcalendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconplf"></use>
                </svg>
                <div class="name">图片加载失败</div>
                <div class="code-name">#iconplf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxinbaniconshangchuan-"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#iconxinbaniconshangchuan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-test"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#iconicon-test</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
